<template>
  <NavBar />
  <div class="workInfoBox">
    <!-- 顶部 start -->
    <div class="top">
      <!-- 左边的盒子 start -->
      <div class="top-left">
        <P class="engName">{{ engName }}</P>
        <p class="zhName">{{ zhName }}</p>
        <p class="BeFrom">
          <span class="collegeName">{{ collegeName }}</span>
          <span class="className">{{ className }}</span>
        </p>
        <div class="introducebox">
          <ul class="introduce">
            <li v-for="(item, index) in introduce" :key="index" class="introduce-item">
              {{ item }}
            </li>
          </ul>
        </div>
      </div>
      <!-- 左边的盒子 end -->

      <!-- 右边的盒子 start -->
      <div class="top-right">
        <el-image :src="url" fit="fill" />
      </div>
      <!-- 右边的盒子 end -->
    </div>
    <!-- 顶部 end -->
    <!-- 作品介绍 start -->
    <div class="introduce-work">
      <p class="work-engname">{{ workEngname }}</p>
      <p class="workNameBox">
        <span>作品名称：</span>
        <span class="workName">{{ workName }}</span>
      </p>
      <p class="work-introduce">
        {{ workIntroduce }}
      </p>
    </div>
    <!--作品介绍 end  -->
    <!-- 作品展示 start -->
    <div class="work-show">
      <div class="work-show-top">
        <el-image :src="workUrlOne" fit="fill" />
      </div>
      <div class="work-show-content">
        <div class="work-show-content-left">
          <el-image :src="workUrlTwo" fit="fill" />
        </div>
        <div class="work-show-content-right">
          <el-image :src="workUrlThree" fit="fill" />
        </div>
      </div>
      <div style="clear: both;"></div>
      <div class="work-show-bottom">
        <el-image :src="workUrlFour" fit="fill" />
      </div>
    </div>
    <!-- 作品展示 end -->
    <!-- 底部 start -->
    <div class="bottom">
      <h1>查看聊城大学其他作品/view more</h1>
      <ul class="other-works">
        <li class="other-item" v-for="(item, index) in otherWorks" :key="index">
          <el-image :src="item.url" />
          <p class="other-name">作品名称：{{ item.name }}</p>
          <p class="other-author">作者名称：{{ item.author }}</p>
          <p class="other-company">公司名称：{{ item.company }}</p>
        </li>
      </ul>

    </div>
    <!-- 底部 end -->
    <Footer />
  </div>
</template>

<script setup lang="ts">
import { NavBar } from '@/components/layout/components/NavBar/index'
import { Footer } from '@/components/layout/components/footer/index'
import { WorkApi } from '@/api/td/work'
const engName = ref('NAME AND POSITION')// 英文姓名
const zhName = ref('萧云霄')// 中文姓名
const collegeName = ref('聊城大学')// 学校名称
const className = ref('2022级视觉传达设计')// 班级名称
const url = ref(new URL('@/assets/workInfo/top-cover.png', import.meta.url).href) // 图片路径


// 作者的介绍
const introduce = ref([
  '1987年，居住于滋贺县大津市。',
  '独立策展人和平面设计师。',
  '2011年从京都造形艺术大学信息设计系毕业后，2013年至2016年担任该大学附属设施ARTZ ONE的董事兼策展人。同年，他在波兹南艺术大学(波兰)完成了为期一年的住院实习，并于2019年完成了亚当·密茨凯维奇大学文化研究研究生院的学业。',
  '其他活动包括参加 2018 年新兴艺术专业人士 Para site 研讨会(香港，2018 年)和 2019 年 East Call 策展驻留计划(布达佩斯，2019年)。自2018年起，他担任合作工作室Yamanaka suplex的项目总监。'
])
const workEngname = ref('ETAILED WORKS')// 作品介绍的英文名称
const workName = ref('******')// 作品名称
const workIntroduce = ref('岭南画学，作为中国传统文化的重要组成部分，以其独特的艺术风格和深厚的文化底蕴影响着一代又一代的艺术家。“笔墨当随时代”，这既是一种学习的态度，也是一种活力的导引，更是一种需要传承下去并发扬光大的重任;中国画学院在教学中也同样灌输着传承与活化的理念，引导学生在学习和创作过程中不断吸收消化，努力将其融入到自己的创作过程中，并以敢于挑战自身局限的勇气展现出他们与时俱进的无限生机与活力。')// 作品介绍
const workUrlOne = ref(new URL('@/assets/workInfo/work-one.png', import.meta.url).href) // 图片路径
const workUrlTwo = ref(new URL('@/assets/workInfo/work-two.png', import.meta.url).href) // 图片路径
const workUrlThree = ref(new URL('@/assets/workInfo/work-three.png', import.meta.url).href) // 图片路径
const workUrlFour = ref(new URL('@/assets/workInfo/work-four.png', import.meta.url).href) // 图片路径
const otherWorks = ref([
  {
    url: new URL('@/assets/workInfo/otherwork-one.png', import.meta.url).href, // 图片路径
    name: '作品1',// 作品名称
    author: '作者1',// 作者
    company: '公司1',// 公司
  },
  {
    url: new URL('@/assets/workInfo/otherwork-two.png', import.meta.url).href, // 图片路径
    name: '作品2',// 作品名称
    author: '作者2',// 作者
    company: '公司2',// 公司
  },
  {
    url: new URL('@/assets/workInfo/otherwork-three.png', import.meta.url).href, // 图片路径
    name: '作品3',// 作品名称
    author: '作者3',// 作者
    company: '公司3',// 公司
  },
  {
    url: new URL('@/assets/workInfo/otherwork-four.png', import.meta.url).href, // 图片路径
    name: '作品4',// 作品名称
    author: '作者4',// 作者
    company: '公司4',// 公司
  },
  {
    url: new URL('@/assets/workInfo/otherwork-five.png', import.meta.url).href, // 图片路径
    name: '作品5',// 作品名称
    author: '作者5',// 作者
    company: '公司5',// 公司
  },
  {
    url: new URL('@/assets/workInfo/otherwork-six.png', import.meta.url).href, // 图片路径
    name: '作品6',// 作品名称
    author: '作者6',// 作者
    company: '公司6',// 公司
  }
])

const getList = async () => {
  try {
    await WorkApi.testWork()
  } finally {
  }
}

/** 初始化 **/
onMounted(() => {
  const tenantCache = {
    "c": new Date().getTime(), // 当前时间戳
    "e": 253402300799000, // 过期时间戳
    "v": "1" // 租户id
  }
  localStorage.setItem("tenantId", JSON.stringify(tenantCache));
  getList()
})

</script>

<style scoped>
/* 公共的样式 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* 顶部 start */
/* 顶部的盒子 */
.top {
  padding: 20px 5%;
  /* 使用百分比代替固定值 */
  min-height: 420px;
  background-color: #B4202F;
  width: 100%;
  display: flex;
  /* 使用flex布局 */
  flex-wrap: wrap;
  /* 允许换行 */
}

/* 顶部盒子里面的两个子盒子 */
.top-left,
.top-right {
  height: auto;
}

/* 左边的盒子 */
/* 左边的盒子 */
.top-left {
  padding: 20px;
  width: 100%;
  /* 移动端默认全宽 */
}

/* 右边的盒子 */
.top-right {
  width: 100%;
  display: flex;
  /* 添加flex布局 */
  justify-content: center;
  /* 水平居中 */
  align-items: center;
  /* 垂直居中 */
}

/* 响应式调整 - 平板及以上 */
@media (min-width: 768px) {
  .top-left {
    width: 55%;
    height: 370px;
  }

  .top-right {
    width: 45%;
    height: 370px;
    /* 增大高度 */
  }
}

/* 图片响应式调整 */
.el-image {
  width: 100% !important;
  height: 100% !important;
  max-width: none;
  /* 移除最大宽度限制 */
  max-height: none;
  /* 移除最大高度限制 */
  object-fit: contain;
  /* 保持图片比例 */
}

/* 字体统一样式 */
.engName,
.zhName {
  color: #fff;
  word-spacing: .1em;
}

/* 英文字体 */
.engName {
  font: 900 italic 40px/1.2 "Noto Sans SC Black", "微软雅黑", "SimSun", "宋体", "Arial", "Helvetica", "sans-serif";
}

/* 中文字体 */
.zhName {
  font: 900 italic 60px/1.2 "Microsoft YaHei", "微软雅黑", "SimSun", "宋体", "Arial", "Helvetica", "sans-serif";
}

/* 作者身份 */
.BeFrom {
  font-size: 24px;
  color: #fff;
}

/* 作者的学校 */
.collegeName {
  display: inline-block;
  margin: 10px 10px 0 0;
}

/* 作者的介绍 */
.introduce {
  list-style: none;
  color: #fff;
}

/* 作者介绍的每条记录 */
.introduce-item {
  line-height: 2;
  font-size: 12px;
  letter-spacing: .2em;
}

/* 顶部 end */

/* 作品介绍 start */
.introduce-work {
  padding: 1rem 6%;
  width: 100%;
  /* 移除固定高度 */
}

/* 作品的英文名 */
.work-engname {
  font-size: clamp(3rem, 7vw, 4.2rem);
  font-weight: 900;
  color: #6D6D6D;
  word-spacing: 0.3em;
  letter-spacing: 0.2em;
  font-family: "Noto Sans SC Black", "微软雅黑", "SimSun", "宋体", "Arial", "Helvetica", "sans-serif";
}

/* 作品名字的盒子 */
.workNameBox {
  display: flex;
  align-items: center;
  font-size: clamp(1.5rem, 4vw, 2.5rem);
  font-weight: 900;
  font-style: italic;
  color: #6D6D6D;
  letter-spacing: 0.2em;
  font-family: "Noto Sans SC Black", "微软雅黑", "SimSun", "宋体", "Arial", "Helvetica", "sans-serif";
}



/* 作品的介绍 */
.work-introduce {
  margin-top: .8rem;
  font-size: clamp(0.75rem, .1vw, 1rem);
  color: #6D6D6D;
  width: 700px;
  max-width: 100%;
  /* 改为100%宽度 */
  line-height: 2;
  letter-spacing: 0.2em;
}

/*  过渡效果 */
.work-show .work-show-top .el-image,
.work-show-content-left,
.work-show-content-right,
.work-show .work-show-bottom .el-image,
.other-item {
  transition: transform 0.3s ease;
}

/*  接触时盒子放大 */
.work-show-content-left:hover,
.work-show-content-right:hover,
.work-show-bottom:hover .el-image,
.other-item:hover,
.work-show-top:hover .el-image {
  transform: scale(1.05);
  /* 确保从中心点缩放 */
  transform-origin: center;

}

/* 作品介绍 end */
/* 作品展示 start */
.work-show {
  margin-bottom: 20px;
  padding: 1rem 10px;
  width: 100%;
  overflow: hidden;
  /* 添加这行，隐藏超出容器的部分 */
  position: relative;
  /* 添加这行，建立新的定位上下文 */
}

/* 接触到盒子时 图片放大 */
.work-show-top:hover .el-image {
  transform: scale(1.05);
  transform-origin: center;
  /* 确保从中心点缩放 */
  position: relative;
  /* 确保层级关系 */
  z-index: 1;
  /* 防止被其他元素遮挡 */
}

/* 展示的中间部分 */
.work-show-content {
  margin-top: 20px;
}

/* 展示的中间部分的两个 */
.work-show-content-left,
.work-show-content-right {
  width: 48%;
  height: 820px;
  margin-right: 2%;
  float: left;
}

/* 展示的底部部分  */
.work-show-bottom {
  margin-top: 40px !important;
}

/* 接触时，放大盒子 */
.work-show-bottom:hover .el-image {
  /* 确保从中心点缩放 */
  position: relative;
  /* 确保层级关系 */
  z-index: 1;
  /* 防止被其他元素遮挡 */
}

/* 底部作品 start */
.bottom {
  margin-top: 20px;
  padding: 1rem 6%;
  width: 100%;
}

/* 作品展示 end */
/* 底部的标题 */
.bottom h1 {
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 900;
  font-style: italic;
  color: #C02430;
  font-family: "Noto Sans SC Black", "微软雅黑", "SimSun", "宋体", "Arial", "Helvetica", "sans-serif";
  letter-spacing: 0.1em;
}

/* 其他相关作品  */
.other-works {
  list-style: none;
  display: flex;
  justify-content: space-between;
  margin-top: 20px;
}

/* 其他作品每个作品的样式 */
.other-item {
  float: left;
  width: 15%;
  height: 270px;
  background-color: #fff;
  margin: 5px 1%;
  border-radius: 30px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}

/* 其他作品中的第一个作品的左边距设为0 */
.other-item:first-child {
  margin-left: 0;
}

/*其他作品中的每个作品的宽度和高度  */
.other-item .el-image {
  width: 100% !important;
  height: 190px !important;
}

/* 其他作品中的每个作品中的作品名称，作者名称和公司名称 */
.other-item .other-name,
.other-item .other-author,
.other-item .other-company {
  margin-top: 1px;
  font-size: 12px;
  color: #6D6D6D;
  margin-left: 15px;
}

/* 底部作品 end */
</style>